<template>
  <view class="simpleAndEasy">
    <!-- 顶部工具栏 -->
    <div class="top_tool t-ju-between">
      <div class="t_tool_left t-ali-center">
        <image class="image" src="https://img02.mockplus.cn/image/2022-07-26/eeef56f0-d8d1-11ec-a554-639301d58d5b.png"
          mode=""></image>
        <span class="text">联系设计师</span>
      </div>
      <div class="t_tool_right t-ali-center">
        <image class="image" mode="widthFix" src="../../static/design/qiehuan.png"></image>
        <span class="text">切换方案（3）</span>
      </div>
    </div>
    <!-- 列表详情 -->
    <view class="listStyle t-ju-between">
      <view class="lis_item" v-for="(item,index) in list" :key="index">
        <image class="icon" src="../../static/design/default.png" mode="widthFix"></image>
        <view class="name">
          这是名字
        </view>
        <view class="button" :class="uIndex == index?'color1': 'color2'">
          待确认(3)
        </view>
      </view>
    </view>
    <!-- 价格计算弹框 -->
    <view class="pupu_dialog">
      <view class="top t-ju-between">
        <view class="title">
          价格计算
        </view>
        <view class="title2">
          商品清单
        </view>
      </view>
      <view class="top t-ju-between no_border">
        <view class="key">
          购买/租赁
        </view>
        <view class="value t-center">
          <view class="circle selected">

          </view>
          <view class="buy">
            购买
          </view>
          <view class="circle">

          </view>
          <view class="lease">
            租赁
          </view>
        </view>
      </view>
      <view class="top t-ju-between no_border">
        <view class="key">
          优惠折扣
        </view>
        <view class="value">
          抖音团购券满500减300
        </view>
      </view>
      <view class="top t-ju-between">
        <view class="key">
          绿植数量
        </view>
        <view class="value">
          7
        </view>
      </view>
      <view class="top t-ju-between no_border marTop10">
        <view class="money">
          999/月
        </view>
        <view class="btn t-center">
          立即购买
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  const uIndex = ref(0)
  const show = ref(true)
  const list = ref([{
    name: '客厅电视柜'
  }, {
    name: '厨房电饭锅'
  }, {
    name: '卧室小台灯',
  }, {
    name: '厨房电饭锅'
  }, {
    name: '卧室小台灯',
  }, {
    name: '厨房电饭锅'
  }, {
    name: '卧室小台灯',
  }, {
    name: '厨房电饭锅'
  }, {
    name: '卧室小台灯',
  }, {
    name: '厨房电饭锅'
  }, {
    name: '卧室小台灯',
  }, {
    name: '厨房电饭锅'
  }, {
    name: '卧室小台灯',
  }, {
    name: '厨房电饭锅'
  }, {
    name: '卧室小台灯',
  }, {
    name: '厨房电饭锅'
  }, {
    name: '卧室小台灯',
  }])
</script>

<style lang="scss" scoped>
  .simpleAndEasy {
    // padding: 0 20rpx;
    background-color: #F6F6F6;



    .listStyle {
      padding: 40rpx 30rpx 0;
      flex-wrap: wrap;

      .lis_item {
        position: relative;
        margin-bottom: 10rpx;
        width: 46%;

        .button {
          padding: 0 20rpx;
          position: absolute;
          top: 0;
          left: 0;
          color: #fff;
          font-size: 24rpx;
          line-height: 33rpx;
          text-align: center;
          border-radius: 0 0 10rpx 0;
        }

        .color1 {
          background-color: #60CDB6;
        }

        .color2 {
          background-color: #facb0c;
        }

        .icon {
          width: 100%;
        }

        .name {
          width: 100%;
          text-align: center;
          font-size: 28rpx;
          line-height: 40rpx;
        }
      }
    }
  }



  .no_border {
    border: none !important;
    border-bottom: none !important;
  }
</style>